<template>
    <div class="page-container index-container">
        <div class="info-part">
            <div class="title">
                <h1>钱塘新区</h1>
                <span>分析 / 评价 / 决策</span>
            </div>
            <div class="part">
                <div>
                    <div class="liStatics">
                        <div class="name">综合指数</div>
                        <div class="score">3.72</div>
                    </div>
                    <div class="imgbox"></div>
                </div>
                <div>
                    <div class="liStatics">
                        <div class="name">均衡系数</div>
                        <div class="score">0.15</div>
                    </div>
                    <div class="imgbox"></div>
                </div>
            </div>
        </div>
        <div class="m-min-mainBox">
            <div class="gen-row">
                <div class="l-genBox gen-shadow u-flex_col">
                    <div class="tit">评价体系指标对比</div>
                    <div class="u-flex ofh">
                        <div class="cardMain">
                            <div class="group">
                                <div class="progressBox" v-for="(item,index) in progressList" :key="index">
                                    <el-progress type="circle" :show-text="false" :width="106" :stroke-width='12' :percentage="item.value" :color="item.color"></el-progress>
                                    <div class="sign">{{item.value/100*5}}</div>
                                    <div class="name">{{item.name}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="swotMain">
                            <div class="swotLine">优势指标：
                                <span class="stat-1">学校创新发展</span>
                                <span class="stat-2">教师专业能力</span>
                            </div>

                            <div class="swotLine">劣势指标：
                                <span class="stat-3">学生综合素质发展</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="r-genBox gen-shadow u-flex_col">
                    <div class="tit">评价内容指标对比</div>
                    <div class="u-flex" style="padding:0 40px 20px 10px;">
                        <u-lineEchart 
                            :keyId="'third1'" yAxisName="评价指数"
                            :legend="legendList1" :list="list1" :markVal="3.5" smooth hasDiff>
                        </u-lineEchart>
                    </div>
                </div>
            </div>

            <div class="gen-row pdt20">
                <div class="fullgenBox gen-shadow u-flex_col">
                    <div class="tit">维度指标对比</div>
                    <div class="u-flex" style="padding:0 40px 20px 10px;">
                        <u-barEchart
                        :keyId="'third2'"  yAxisName="评价指数"
                        :legend="legendList2" :list="list2" :markVal="3.8" :grid="{bottom:100}" hasDiff>
                        </u-barEchart>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {ThisYear,Linep} from "./parts"
export default {
    name: 'pageIndex',
    data(){
        return{
            tabSwitch:'1',
            progressList:[
                { value:82.6,color:'#fdb628',name:'学校创新发展' },
                { value:78.4,color:'#6374f7',name:'教师专业能力' },
                { value:62.4,color:'#00cd86',name:'学生综合素质发展' },
            ],

            legendList1:[
                {name:'学校创新发展',key:1,color:'#fdb628',areaStyleColor:"#8da0e2"},
                {name:'教师专业能力',key:2,color:'#6374f7'},
                {name:'学生综合素质发展',key:3,color:'#00cd86'},
                // {name:'需关注',min:0,max:2.5,color:'#ff7b12',isSign: true},
            ],
            list1:[
                {name:"学生特质",key:1,value:[3.52]},
                {name:"教师行为",key:1,value:[2.53]},
                {name:"领导风格",key:1,value:[4.24]},
                {name:"学校环境",key:1,value:[3.81]},

                {name:"师德修养",key:2,value:[4.82]},
                {name:"教学能力",key:2,value:[2.65]},
                {name:"教育能力",key:2,value:[3.11]},
                {name:"教研能力",key:2,value:[3.52]},
                {name:"创新行为",key:2,value:[4.32]},
                
                {name:"品德素养",key:3,value:[3.52]},
                {name:"身心素养",key:3,value:[2.38]},
                {name:"学业素养",key:3,value:[3.36]},
                {name:"实践创新素养",key:3,value:[4.12]},
                {name:"艺术素养",key:3,value:[3.65]},   
            ],
            legendList2:[
                {name:'学校创新发展',key:1,color:'#fdb628',itemcolor:['#ffc600','#ff9000']},
                {name:'教师专业能力',key:2,color:'#6374f7',itemcolor:['#7686ff','#595fec']},
                {name:'学生综合素质发展',key:3,color:'#00cd86',itemcolor:['#2dd681','#23c5a2']},
            ],
            list2:[
                {name:"创新素养",key:1,value:[3.22]},
                {name:"创造性教学",key:1,value:[3.85]},
                {name:"创造力培养",key:1,value:[3.21]},
                {name:"创造性特征",key:1,value:[3.24]},
                {name:"创造性行为",key:1,value:[2.27]},
                {name:"物理环境",key:1,value:[3.84]},
                {name:"人文环境",key:1,value:[3.21]},
                {name:"教学过程和方法",key:1,value:[4.53]},
                {name:"爱国守法",key:2,value:[3.85]},
                {name:"爱岗敬业",key:2,value:[4.22]},
                {name:"教师的基本素质",key:2,value:[4.24]},
                {name:"关爱学生",key:2,value:[2.41]},
                {name:"文献综述能力",key:2,value:[4.25]},
                {name:"教书育人",key:2,value:[4.27]},
                {name:"研究设计能力",key:2,value:[3.82]},
                {name:"为人师表",key:2,value:[4.22]},
                {name:"研究方法的运用能力",key:2,value:[3.28]},
                {name:"终身学习",key:2,value:[4.27]},
                {name:"资料收集与处理能力",key:2,value:[4.29]},
                {name:"教师教学目标和内容",key:2,value:[3.27]},
                {name:"撰写和写作论文的能力",key:2,value:[4.25]},
                {name:"成果应用能力",key:2,value:[3.63]},
                {name:"创造性教学",key:2,value:[4.42]},
                {name:"创造力培养",key:2,value:[4.21]},
                {name:"体质健康",key:2,value:[3.84]},
                {name:"行为习惯",key:3,value:[3.05]},
                {name:"心理健康",key:3,value:[2.82]},
                {name:"公民素养",key:3,value:[4.25]},
                {name:"语文",key:3,value:[4.22]},
                {name:"人格品质",key:3,value:[4.24]},
                {name:"数学",key:3,value:[4.22]},
                {name:"科学",key:3,value:[4.21]},
                {name:"理想信念",key:3,value:[4.25]},
                {name:"英语",key:3,value:[4.26]},
                {name:"学习动机",key:3,value:[4.26]},
                {name:"学业负担",key:3,value:[4.27]},
                {name:"自我效能",key:3,value:[4.28]},
                {name:"艺术知识掌握的客观依据",key:3,value:[4.22]},
                {name:"学习能力",key:3,value:[4.23]},
                {name:"艺术表现的主观评价",key:3,value:[4.24]},
                {name:"创新特质",key:3,value:[4.25]},
                {name:"创新实践",key:3,value:[4.25]},
                {name:"创新成就",key:3,value:[4.25]},
            ]
        }
    },
    components:{
        ThisYear,Linep
    },
    created(){
        this.getInit()
    },
    mounted(){

    },
    methods:{
        getInit(){
            // this.tabList[0].active = true
        },
        clickTab(item){
            this.tabList.forEach(every => {
                this.$set(every,'active',false)
            })
            item.active = true
            this.tabSwitch = item.value
        }
    },
}
</script>
<style lang="scss" scoped>
.l-genBox{
    float: left;
    width: 510px;
    height: 450px;
    margin-right: 24px;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
}
.r-genBox{
    height: 450px;
    border-radius: 5px;
    background: #FFF;
    overflow: hidden;
}
.l-genBox,.r-genBox{
    .tit{
        width: 100%;
        padding: 20px 40px;
        font-size: 18px;
        color: #333333;
        font-weight: bold;
    }
}
.cardMain{
    .group{
        padding-top: 20px;
        display: flex;
        justify-content: space-between;
        text-align: center;
    }
    .progressBox{
        width: 33.33%;
        position: relative;
        .name{
            font-size: 16px; color: #747e93;
            margin-top: 22px;
        }
        .sign{
            position: absolute; top: 38px; left: 0;
            width: 100%; text-align: center;
            font-size: 22px; color: #333333;
            font-weight: bold;
        }
        /deep/{
            .el-progress__text{
                font-size: 22px !important;
                color: #333;
                font-weight: bold;
            }
        }
    }
}
.swotMain{
    padding: 40px;
    margin-top: 10px;
    .swotLine{
        font-size: 18px;
        color: #2a2f55;
        margin: 20px 0;
        span{
            padding: 4px 8px;
            border-radius: 5px;
            font-size: 16px;
            margin-right: 8px;
        }
    }
}
.stat-1{
    background: #eaf4ff;
    color: #3594ff;
}
.stat-2{
    background: #e5faf3;
    color: #00cd86;
}
.stat-3{
    background: #fff8e9;
    color: #f4a300;
}
</style>
